import React, { useEffect } from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { Tab, TabItem } from './HomeLayout.style'; 
import { useDispatch, useSelector } from 'react-redux';
import { actionCreators } from '../pages/shopping/store';

function Home(props) {

  // 保存刷新页面时选中的状态
  let storage = window.localStorage;

  let index = useSelector((state) => ({
    index: state.shopping.index
  })).index;

  const dispatch = useDispatch();

  useEffect(() => {
    if(storage.getItem("index")) {
      index = parseInt(storage.getItem("index"));
    }
    dispatch(actionCreators.changeIndex(index));
  }, []);

  const changeDispatchIndex = (index) => {
    dispatch(actionCreators.changeIndex(index));
    storage.setItem("index", index);
  }

  return (
    <>
      <Tab>
        <NavLink 
          to="/shop" 
          className={({isActive}) => isActive ? "selected" : null}
        >
          <TabItem onClick={() => {changeDispatchIndex(0)}}>
            {
              index === 0 
              ?
              <svg t="1641557247582" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3179" width="32" height="32"><path d="M883.8144 305.373867H140.1856a68.266667 68.266667 0 0 0-67.925333 75.178666l50.056533 491.52a68.266667 68.266667 0 0 0 67.925333 61.354667h643.5328a68.266667 68.266667 0 0 0 67.925334-61.354667l50.039466-491.52a68.266667 68.266667 0 0 0-67.925333-75.178666z m-743.6288 68.266666h743.6288l-50.039467 491.52H190.225067l-50.039467-491.52z" fill="#2c2c2c" p-id="3180"></path><path d="M607.573333 85.333333a102.4 102.4 0 0 1 102.331734 98.56L709.973333 187.733333v228.437334a34.133333 34.133333 0 0 1-68.164266 2.56l-0.1024-2.56V187.733333a34.133333 34.133333 0 0 0-31.573334-34.030933L607.573333 153.6H416.426667a34.133333 34.133333 0 0 0-34.030934 31.5904l-0.1024 2.56v228.420267a34.133333 34.133333 0 0 1-68.164266 2.56l-0.1024-2.56V187.733333a102.4 102.4 0 0 1 98.56-102.314666L416.426667 85.333333h191.146666z" fill="#2c2c2c" p-id="3181"></path><path d="M699.733333 733.866667v34.133333a34.133333 34.133333 0 0 1-34.133333 34.133333H358.4a34.133333 34.133333 0 0 1-34.133333-34.133333v-34.133333h375.466666z" fill="#2c2c2c" p-id="3182"></path></svg>
              : 
              <svg t="1641557247582" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3179" width="32" height="32"><path d="M883.8144 305.373867H140.1856a68.266667 68.266667 0 0 0-67.925333 75.178666l50.056533 491.52a68.266667 68.266667 0 0 0 67.925333 61.354667h643.5328a68.266667 68.266667 0 0 0 67.925334-61.354667l50.039466-491.52a68.266667 68.266667 0 0 0-67.925333-75.178666z m-743.6288 68.266666h743.6288l-50.039467 491.52H190.225067l-50.039467-491.52z" fill="#cdcdcd" p-id="3180"></path><path d="M607.573333 85.333333a102.4 102.4 0 0 1 102.331734 98.56L709.973333 187.733333v228.437334a34.133333 34.133333 0 0 1-68.164266 2.56l-0.1024-2.56V187.733333a34.133333 34.133333 0 0 0-31.573334-34.030933L607.573333 153.6H416.426667a34.133333 34.133333 0 0 0-34.030934 31.5904l-0.1024 2.56v228.420267a34.133333 34.133333 0 0 1-68.164266 2.56l-0.1024-2.56V187.733333a102.4 102.4 0 0 1 98.56-102.314666L416.426667 85.333333h191.146666z" fill="#cdcdcd" p-id="3181"></path><path d="M699.733333 733.866667v34.133333a34.133333 34.133333 0 0 1-34.133333 34.133333H358.4a34.133333 34.133333 0 0 1-34.133333-34.133333v-34.133333h375.466666z" fill="#cdcdcd" p-id="3182"></path></svg>
            }
            <span>购买</span>
          </TabItem>
        </NavLink>
        <NavLink 
          to="/identify" 
          className={({isActive}) => isActive ? "selected" : null}
        >
          <TabItem onClick={() => {changeDispatchIndex(1)}}>
            {
              index === 1
              ?
              <svg t="1641557181347" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="32" height="32"><path d="M266.8 532.5 324 486.1l114.4 84.5c0 0 158-163.6 310.6-239.9l21.8 24.6c0 0-190.7 158.1-288.7 368.1L266.8 532.5zM202 209l0 369.8c0 60.1 0 218.8 314.1 343.6 314.1-124.8 314.1-283.5 314.1-343.6l0-369.8c-173.9-0.7-274-62.6-314.1-94.6C476 146.4 375.9 208.3 202 209zM516.1 982.2l-10-3.9C183.6 853.6 146.4 690.6 146.4 578.8l0-426.9 28.8 1c224.1 7.6 319.5-93.6 320.4-94.6l20.5-22.5 20.5 22.5c0.8 0.8 91.2 95 296.5 95l0 0c7.8 0 15.8-0.1 23.9-0.4l28.8-1 0 426.9c0 111.8-37.3 274.8-359.7 399.5L516.1 982.2z" p-id="2129" fill="#2c2c2c"></path></svg>
              :
              <svg t="1641557181347" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="32" height="32"><path d="M266.8 532.5 324 486.1l114.4 84.5c0 0 158-163.6 310.6-239.9l21.8 24.6c0 0-190.7 158.1-288.7 368.1L266.8 532.5zM202 209l0 369.8c0 60.1 0 218.8 314.1 343.6 314.1-124.8 314.1-283.5 314.1-343.6l0-369.8c-173.9-0.7-274-62.6-314.1-94.6C476 146.4 375.9 208.3 202 209zM516.1 982.2l-10-3.9C183.6 853.6 146.4 690.6 146.4 578.8l0-426.9 28.8 1c224.1 7.6 319.5-93.6 320.4-94.6l20.5-22.5 20.5 22.5c0.8 0.8 91.2 95 296.5 95l0 0c7.8 0 15.8-0.1 23.9-0.4l28.8-1 0 426.9c0 111.8-37.3 274.8-359.7 399.5L516.1 982.2z" p-id="2129" fill="#cdcdcd"></path></svg>
            }
            <span>鉴别</span>
          </TabItem>
        </NavLink>
        <NavLink 
          to="/wash" 
          className={({isActive}) => isActive ? "selected" : null}
        >
          <TabItem onClick={() => {changeDispatchIndex(2)}}>
            {
              index === 2
              ?
              <svg t="1641557042339" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3071" width="32" height="32"><path d="M626.036364 623.709091h-193.163637c-9.309091 0-18.618182-6.981818-18.618182-18.618182s6.981818-18.618182 18.618182-18.618182h193.163637c9.309091 0 18.618182 6.981818 18.618181 18.618182s-9.309091 18.618182-18.618181 18.618182zM898.327273 623.709091h-125.672728c-9.309091 0-18.618182-6.981818-18.618181-18.618182s6.981818-18.618182 18.618181-18.618182h125.672728c9.309091 0 18.618182 6.981818 18.618182 18.618182s-9.309091 18.618182-18.618182 18.618182z" fill="#2c2c2c" p-id="3072"></path><path d="M686.545455 607.418182a16.290909 16.290909 0 1 0 32.581818 0 16.290909 16.290909 0 1 0-32.581818 0Z" fill="#2c2c2c" p-id="3073"></path><path d="M667.927273 302.545455c125.672727 0 228.072727 102.4 228.072727 228.072727v404.945454c0 2.327273-2.327273 4.654545-4.654545 4.654546H444.509091c-2.327273 0-4.654545-2.327273-4.654546-4.654546V530.618182c0-125.672727 102.4-228.072727 228.072728-228.072727m0-34.909091c-144.290909 0-262.981818 116.363636-262.981818 262.981818v404.945454c0 20.945455 18.618182 39.563636 39.563636 39.563637h444.509091c20.945455 0 39.563636-18.618182 39.563636-39.563637V530.618182c0-144.290909-116.363636-262.981818-260.654545-262.981818z" fill="#2c2c2c" p-id="3074"></path><path d="M698.181818 169.890909v95.418182h-67.490909V169.890909H698.181818m18.618182-34.909091h-104.727273c-9.309091 0-16.290909 6.981818-16.290909 16.290909v125.672728c0 11.636364 9.309091 23.272727 23.272727 23.272727h90.763637c11.636364 0 23.272727-9.309091 23.272727-23.272727V151.272727c0-9.309091-6.981818-16.290909-16.290909-16.290909z" fill="#2c2c2c" p-id="3075"></path><path d="M644.654545 65.163636h34.909091v93.090909h-34.909091z" fill="#2c2c2c" p-id="3076"></path><path d="M958.836364 172.218182c-9.309091 0-16.290909-6.981818-16.290909-13.963637-13.963636-74.472727-123.345455-74.472727-125.672728-74.472727H505.018182c-9.309091 0-18.618182-6.981818-18.618182-18.618182s6.981818-18.618182 18.618182-18.618181h311.854545c4.654545 0 139.636364 2.327273 158.254546 104.727272 2.327273 9.309091-4.654545 18.618182-13.963637 20.945455h-2.327272z" fill="#2c2c2c" p-id="3077"></path><path d="M435.2 155.927273H125.672727c-48.872727 0-83.781818 39.563636-76.8 88.436363l90.763637 558.545455c6.981818 44.218182 67.490909 76.8 134.981818 79.127273v-30.254546c-58.181818-2.327273-102.4-27.927273-104.727273-53.527273l-93.090909-574.836363c-2.327273-11.636364 0-20.945455 6.981818-27.927273 4.654545-6.981818 13.963636-9.309091 23.272727-9.309091h346.763637c9.309091 0 18.618182 2.327273 23.272727 9.309091 6.981818 6.981818 9.309091 16.290909 6.981818 27.927273l-4.654545 37.236363c-2.327273 9.309091 4.654545 16.290909 13.963636 18.618182 6.981818 0 13.963636-4.654545 16.290909-13.963636l2.327273-20.945455c6.981818-46.545455-25.6-88.436364-76.8-88.436363z" fill="#2c2c2c" p-id="3078"></path><path d="M353.745455 944.872727H169.890909V884.363636h183.854546c9.309091 0 16.290909-6.981818 16.290909-16.290909 0-9.309091-6.981818-16.290909-16.290909-16.290909H160.581818c-11.636364 0-20.945455 9.309091-20.945454 20.945455V954.181818c0 11.636364 9.309091 20.945455 20.945454 20.945455h193.163637c9.309091 0 16.290909-6.981818 16.290909-16.290909 0-6.981818-6.981818-13.963636-16.290909-13.963637z" fill="#2c2c2c" p-id="3079"></path><path d="M188.509091 563.2c-9.309091 0-16.290909-6.981818-16.290909-13.963636l-41.890909-256c-2.327273-9.309091 4.654545-18.618182 13.963636-20.945455 9.309091-2.327273 18.618182 4.654545 18.618182 13.963636l41.890909 256c2.327273 9.309091-4.654545 18.618182-13.963636 20.945455h-2.327273z" fill="#2c2c2c" p-id="3080"></path></svg>
              :
              <svg t="1641557042339" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3071" width="32" height="32"><path d="M626.036364 623.709091h-193.163637c-9.309091 0-18.618182-6.981818-18.618182-18.618182s6.981818-18.618182 18.618182-18.618182h193.163637c9.309091 0 18.618182 6.981818 18.618181 18.618182s-9.309091 18.618182-18.618181 18.618182zM898.327273 623.709091h-125.672728c-9.309091 0-18.618182-6.981818-18.618181-18.618182s6.981818-18.618182 18.618181-18.618182h125.672728c9.309091 0 18.618182 6.981818 18.618182 18.618182s-9.309091 18.618182-18.618182 18.618182z" fill="#cdcdcd" p-id="3072"></path><path d="M686.545455 607.418182a16.290909 16.290909 0 1 0 32.581818 0 16.290909 16.290909 0 1 0-32.581818 0Z" fill="#cdcdcd" p-id="3073"></path><path d="M667.927273 302.545455c125.672727 0 228.072727 102.4 228.072727 228.072727v404.945454c0 2.327273-2.327273 4.654545-4.654545 4.654546H444.509091c-2.327273 0-4.654545-2.327273-4.654546-4.654546V530.618182c0-125.672727 102.4-228.072727 228.072728-228.072727m0-34.909091c-144.290909 0-262.981818 116.363636-262.981818 262.981818v404.945454c0 20.945455 18.618182 39.563636 39.563636 39.563637h444.509091c20.945455 0 39.563636-18.618182 39.563636-39.563637V530.618182c0-144.290909-116.363636-262.981818-260.654545-262.981818z" fill="#cdcdcd" p-id="3074"></path><path d="M698.181818 169.890909v95.418182h-67.490909V169.890909H698.181818m18.618182-34.909091h-104.727273c-9.309091 0-16.290909 6.981818-16.290909 16.290909v125.672728c0 11.636364 9.309091 23.272727 23.272727 23.272727h90.763637c11.636364 0 23.272727-9.309091 23.272727-23.272727V151.272727c0-9.309091-6.981818-16.290909-16.290909-16.290909z" fill="#cdcdcd" p-id="3075"></path><path d="M644.654545 65.163636h34.909091v93.090909h-34.909091z" fill="#cdcdcd" p-id="3076"></path><path d="M958.836364 172.218182c-9.309091 0-16.290909-6.981818-16.290909-13.963637-13.963636-74.472727-123.345455-74.472727-125.672728-74.472727H505.018182c-9.309091 0-18.618182-6.981818-18.618182-18.618182s6.981818-18.618182 18.618182-18.618181h311.854545c4.654545 0 139.636364 2.327273 158.254546 104.727272 2.327273 9.309091-4.654545 18.618182-13.963637 20.945455h-2.327272z" fill="#cdcdcd" p-id="3077"></path><path d="M435.2 155.927273H125.672727c-48.872727 0-83.781818 39.563636-76.8 88.436363l90.763637 558.545455c6.981818 44.218182 67.490909 76.8 134.981818 79.127273v-30.254546c-58.181818-2.327273-102.4-27.927273-104.727273-53.527273l-93.090909-574.836363c-2.327273-11.636364 0-20.945455 6.981818-27.927273 4.654545-6.981818 13.963636-9.309091 23.272727-9.309091h346.763637c9.309091 0 18.618182 2.327273 23.272727 9.309091 6.981818 6.981818 9.309091 16.290909 6.981818 27.927273l-4.654545 37.236363c-2.327273 9.309091 4.654545 16.290909 13.963636 18.618182 6.981818 0 13.963636-4.654545 16.290909-13.963636l2.327273-20.945455c6.981818-46.545455-25.6-88.436364-76.8-88.436363z" fill="#cdcdcd" p-id="3078"></path><path d="M353.745455 944.872727H169.890909V884.363636h183.854546c9.309091 0 16.290909-6.981818 16.290909-16.290909 0-9.309091-6.981818-16.290909-16.290909-16.290909H160.581818c-11.636364 0-20.945455 9.309091-20.945454 20.945455V954.181818c0 11.636364 9.309091 20.945455 20.945454 20.945455h193.163637c9.309091 0 16.290909-6.981818 16.290909-16.290909 0-6.981818-6.981818-13.963636-16.290909-13.963637z" fill="#cdcdcd" p-id="3079"></path><path d="M188.509091 563.2c-9.309091 0-16.290909-6.981818-16.290909-13.963636l-41.890909-256c-2.327273-9.309091 4.654545-18.618182 13.963636-20.945455 9.309091-2.327273 18.618182 4.654545 18.618182 13.963636l41.890909 256c2.327273 9.309091-4.654545 18.618182-13.963636 20.945455h-2.327273z" fill="#cdcdcd" p-id="3080"></path></svg>
            }
            <span>洗护</span>
          </TabItem>
        </NavLink>
        <NavLink 
          to="/my" 
          className={({isActive}) => isActive ? "selected" : null}
        >
          <TabItem onClick={() => {changeDispatchIndex(3)}}>
            {
              index === 3
              ?
              <svg t="1641556875223" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1245" width="32" height="32"><path d="M512 82.922667a424.938667 424.938667 0 0 1 196.544 47.872C762.453333 107.573333 821.482667 96 885.333333 96c23.786667 0 39.253333 25.034667 28.618667 46.314667a7024.8 7024.8 0 0 0-56.917333 116.234666A424.853333 424.853333 0 0 1 938.666667 509.589333c0 235.637333-191.029333 426.666667-426.666667 426.666667s-426.666667-191.029333-426.666667-426.666667c0-235.648 191.029333-426.666667 426.666667-426.666666zM330.666667 362.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v64a42.666667 42.666667 0 1 0 85.333333 0v-64a42.666667 42.666667 0 0 0-42.666666-42.666666z m170.666666 0a42.666667 42.666667 0 0 0-42.666666 42.666666v64a42.666667 42.666667 0 1 0 85.333333 0v-64a42.666667 42.666667 0 0 0-42.666667-42.666666z" p-id="1246"></path></svg>
              :
              <svg t="1641556875223" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1245" width="32" height="32"><path d="M512 82.922667a424.938667 424.938667 0 0 1 196.544 47.872C762.453333 107.573333 821.482667 96 885.333333 96c23.786667 0 39.253333 25.034667 28.618667 46.314667a7024.8 7024.8 0 0 0-56.917333 116.234666A424.853333 424.853333 0 0 1 938.666667 509.589333c0 235.637333-191.029333 426.666667-426.666667 426.666667s-426.666667-191.029333-426.666667-426.666667c0-235.648 191.029333-426.666667 426.666667-426.666666zM330.666667 362.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v64a42.666667 42.666667 0 1 0 85.333333 0v-64a42.666667 42.666667 0 0 0-42.666666-42.666666z m170.666666 0a42.666667 42.666667 0 0 0-42.666666 42.666666v64a42.666667 42.666667 0 1 0 85.333333 0v-64a42.666667 42.666667 0 0 0-42.666667-42.666666z" p-id="1246" fill="#cdcdcd"></path></svg>
            }
            <span>我</span>
          </TabItem>
        </NavLink>
      </Tab>
      <Outlet />
      </>
  );
}

export default React.memo(Home);
